<script setup>
//忘记密码
import { onMounted, ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { sendEmailService, modifyPasswordService } from "@/api/user";
import { SUCCESS } from "@/core/constants/HttpStatus";

const email = ref(""); // 用户邮箱
const captcha = ref(""); //验证码
const newPwd = ref(""); //新密码
const checkNewPwd = ref(""); //确认新密码

const data = reactive({
  show: true,
  count: "",
  timer: null,
});
// 将验证码发送用户邮箱
const sendEmail = async () => {
  try {
    if (email.value === "") {
      ElMessage.error("请输入邮箱地址");
    } else {
      const res = await sendEmailService({ email: email.value });
      console.log(res);
      if (res.data === "succeed") {
        ElMessage.success("验证码已发送");
        let clicktime = new Date().getTime() + 60000;
        timeDown(clicktime);
      } else {
        throw new Error(res.data.msg);
      }
    }
  } catch (error) {
    ElMessage.error(error.message || "验证码发送失败");
  }
};

//倒计时
const timeDown = (time) => {
  if (!data.timer) {
    data.count = Math.ceil((JSON.parse(time) - new Date().getTime()) / 1000);
    data.show = false;
    data.timer = setInterval(() => {
      if (data.count > 0) {
        data.count--;
      } else {
        data.show = true;
        clearInterval(data.timer);
        data.timer = null;
      }
    }, 1000);
  }
};
/**
 * 修改密码
 * TODO:参数检验
 * code:6位非空数字字符
 * email:不能为空，要符合基本邮箱写法
 * newPwd:6-15位非空字符,新密码不能与原密码相同
 * checkNewPwd:6-15位非空字符，需要与newPwd保持一致
 **/
const modifyPassword = async () => {
  try {
    if (newPwd.value.length >= 6 && newPwd.value.length <= 15) {
      console.log(newPwd.value.length);
      if (newPwd.value === checkNewPwd.value) {
        console.log("2");
        const res = await modifyPasswordService({
          code: captcha.value,
          email: email.value,
          newPwd: newPwd.value,
        });
        console.log(res);
        const { code, msg } = res.data;
        if (code == SUCCESS) {
          if (msg == "密码修改成功") {
            ElMessage.success("密码修改成功");
            email.value = "";
            captcha.value = "";
            newPwd.value = "";
            checkNewPwd.value = "";
          } else {
            ElMessage.error(msg);
          }
        } else {
          throw new Error(msg);
        }
      } else {
        ElMessage.error("两次密码不一致");
      }
    } else {
      ElMessage.error("密码需为6-15位字符");
    }
  } catch (error) {
    ElMessage.error(error.message || "密码修改失败");
  }
};
</script>
<template>
  <div class="PasswordBox">
    <div class="titlebox">
      <span class="title">找回密码</span>
    </div>
    <div class="emailBox">
      <i class="iconfont icon-youxiang" />
      <input
        class="inputField"
        type="text"
        placeholder="请输入邮箱"
        v-model="email"
      />
    </div>
    <div class="captchaBox">
      <i class="iconfont icon-yanzhengyanzhengma" />
      <input
        class="captchaField"
        type="text"
        placeholder="请输入验证码"
        v-model="captcha"
      />
      <button v-if="data.show" class="getCodeButton" @click="sendEmail">
        获取验证码
      </button>
      <button v-else class="countDownButton">{{ data.count }}s后重试</button>
    </div>
    <div class="password">
      <i class="iconfont icon-mima" />
      <input
        class="inputField"
        type="password"
        placeholder="请输入新的密码"
        v-model="newPwd"
      />
    </div>
    <div class="password">
      <i class="iconfont icon-querenmima" />
      <input
        class="inputField"
        type="password"
        placeholder="请确认新密码"
        v-model="checkNewPwd"
      />
    </div>
    <div class="buttonbox">
      <button class="resetButton" @click="modifyPassword">重置密码</button>
    </div>
    <div class="bottombox">
      <span class="b1"><router-link to="/Login">返回登录</router-link></span>
    </div>
  </div>
</template>
<style scoped lang="less">
.PasswordBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
  height: auto;
}

.titlebox {
  display: flex;
  /* 设置为 Flex 容器 */
  align-items: center;
  /* 垂直居中 */
  height: 20%;
  margin-top: 5%;
  span {
    font-size: 28px;
    color: #1e9ab5;
    margin: auto;
    letter-spacing: 5px;
  }
}

.emailBox {
  display: flex;
  /* 设置为 Flex 容器 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  height: 9%;
  i {
    font-size: 25px;
    color: rgb(175, 171, 171);
  }
}

.captchaBox {
  display: flex;
  /* 设置为 Flex 容器 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  height: 9%;
  i {
    font-size: 22px;
    color: rgb(175, 171, 171);
  }
  .captchaField {
    background-color: transparent;
    width: 41%;
    color: grey;
    border: none;
    box-shadow: none;
    /* 下边框样式 */
    border-bottom: 1px solid #1e9ab5;
    padding: 5px 0;
    text-indent: 10px;
    margin: 8px 5px;
    font-size: 18px;
    letter-spacing: 2px;
  }
  .getCodeButton {
    background-color: #27aac7;
    border: 1px solid white;
    color: white;
    height: 30px;
    width: 90px;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px;
  }
  .countDownButton {
    background-color: white;
    border: 1px solid #27aac7;
    color: #27aac7;
    height: 30px;
    width: 90px;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px;
  }
}

.password {
  display: flex;
  /* 设置为 Flex 容器 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  height: 9%;
}

.password i {
  font-size: 22px;
  color: rgb(175, 171, 171);
}

/*文本框*/
.inputField {
  background-color: transparent;
  width: 60%;
  color: rgb(175, 171, 171);
  border: none;
  box-shadow: none;
  /* 下边框样式 */
  border-bottom: 1px solid #1e9ab5;
  padding: 5px 0;
  text-indent: 10px;
  margin: 8px 5px;
  font-size: 18px;
  letter-spacing: 2px;
}
/* 输入框提示信息字体 */
input::placeholder {
  color: rgb(212, 209, 209);
  font-size: 16px;
}

.buttonbox {
  display: flex;
  /* 设置为 Flex 容器 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  margin-top: 4%;
  .resetButton {
    width: 50%;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #1e9ab5;
    border: none;
    border-radius: 8px;
    border: 1px solid white;
  }
}

.bottombox {
  display: flex;
  /* 设置为 Flex 容器 */
  align-items: center;
  /* 垂直居中 */
  margin-bottom: 3%;
}

.bottombox .b1 {
  margin-left: 85%;
  font-size: 14px;
}

@media (max-height: 450px) {
  .b1 {
    display: none;
  }
}
</style>